<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="css/mui.min.css" rel="stylesheet" />

        <style>
            body,
            div,
            dl,
            dt,
            dd,
            ul,
            ol,
            li,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            pre,
            code,
            form,
            fieldset,
            legend,
            input,
            textarea,
            p,
            blockquote,
            th,
            td,
            hr,
            button,
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            hgroup,
            menu,
            nav,
            section,
            br {
                margin: 0;
                padding: 0;
            }
            
            body {
                font-family: "microsoft yahei";
                color: #FFFFFF;
                overflow-x: hidden;
                overflow-y: hidden;
                background: #333333;
            }
            .mui-bar{
                background: #333333;
                box-shadow: none;
            }
            .back{
                font-size: 22px;
                height: 100px;
                line-height: 100px;
                padding:0 10px;
                border: 0px solid red;
                margin-left: 10px;
            }
            .back img{    
                width: 12px;
                height: 24px;
            }
            .mui-content{
                width: 60%;
                margin: 80px auto 50px auto;
                background:#333333 ;
                text-align: center;
                border: 0px solid red;
            }
            .mui-content div{
                width: 100%;
                background:#333333 ;
                border: 0px solid red;
            }
            .mui-content label{                
                color: #FFFFFF;
                text-align: center;
                border: 0px solid red;
            }
            .mui-btn {
                padding: 10px;
                width: 80%;
                margin: auto;
            }
            .mui-content-setting1 {
                width: 100%;
                background: #333333;
                border: 0px solid red;
                padding: 0 10px;
                font-size: 20px;
                float: left;
            }
            .button {
                background: url(icon/setting/button.png) no-repeat;
                background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                font-size: 20px;
                width: 80%;
                height: 50px;
                margin: auto;
                line-height: 50px;
                border: none;
                color: #FFFFFF;
            }
            video{
                transform: rotateY(180deg);
                -webkit-transform: rotateY(180deg);    /* Safari 和 Chrome */
                -moz-transform: rotateY(180deg);
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <div id='user' class="mui-pull-left">
                <div class="mui-pull-left back" onclick="back()">
                    <img class="mui-icon-back" src="icon/main/back.png" />
                </div>
            </div>
            <span class="mui-title">人脸识别登录</span>
    </header>
                 
        <div class="mui-content">
            <div style="margin: auto;margin-bottom: 50px; ">
                <video id="video" width="100%" height="100%" style="border: 0px solid red;margin: auto;"></video>
                <canvas id='canvas' width="100%" height="100px" style="display: none;"></canvas>                
                <!--<img id='img' src=''>-->
            </div>    
            <label>请正对手机进行人脸验证</label>
        </div>    
        <!--<div class="mui-content-setting1">
            <div id='check' class="button mui-text-center">人脸识别</div>
        </div>-->
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mui.min.js"></script>
        <script>
            function back() {
                plus.webview.open("login.html"); 
            }
            var video,canvas,vendorUrl,interval;
            var time=0;
            //自动拍照
            function getface(){
                time++;            
                
                //绘制canvas图形
                canvas.getContext('2d').drawImage(video, 0, 0, 100, 100);
                //把canvas图像转为img图片
                var bdata = canvas.toDataURL("image/png");
                //img.src = canvas.toDataURL("image/png");
                var base64 = bdata.split(',')[1];//照片压缩成base位数据
                //提交至接口匹配人脸库
                $.post('http://192.168.1.39:8039/FaceWebService.asmx/getFace', {
                    "face": base64,
                    "group": "test"
                }, function(data) {                        
                    //人脸识别成功直接跳转至主页
                    if(data.error_code == "0") {
                        clearInterval(interval);//清除定时器  
                        plus.webview.open("main.html");    //跳转至主页                        
                    } else if(time>9){
                        clearInterval(interval);//清除定时器 
                        time=0;//重新计时
                        //10s后未识别成功，提示用户
                        if(data.error_code == "110") {
                            alert("人脸匹配度低于70，匹配失败！");
                        } else if(data.error_code == "222202") {
                            alert("未检测到人脸,请使用账号登录！");                            
                        } else if(data.error_code == "222203") {
                            alert("无法解析人脸，请检查图片质量！");
                        } else if(data.error_code == "222207") {                            
                            alert("未找到匹配的用户，请确认人脸库中是否存在此用户！");
                        }else {
                            alert("匹配失败，错误代码：" + data.error_code + "，请联系技术人员！");
                        }
                        plus.webview.open("login.html"); 
                    }    
                }, 'json');
            }
            
            (function($, doc) {
                $.init(); 
                $.plusReady(function() {
                    video = doc.getElementById('video'),
                    canvas = doc.getElementById('canvas'),
                    vendorUrl = window.URL || window.webkitURL;
                        
                    //初始化摄像头：媒体对象；仅支持android，ios11.0一下系统均不支持
                    navigator.getMedia =navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    navigator.getMedia({
                        video: true, //使用摄像头对象
                        audio: false //不适用音频
                    }, function(strem) {
                        video.src = vendorUrl.createObjectURL(strem);
                        video.play();
                    }, function(error) {
                        alert(error);
                    });
                    //getface(); 
                    
                    interval=setInterval(getface,1000);
                    
                    /*//手动拍照
                    var checkButton = doc.getElementById('check');
                    checkButton.addEventListener('tap', function(event) {
                        
                    });*/
                });
            }(mui, document));
        </script>
    </body>

</html>